<template>
  <div class="orderPane">

    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/front/user' }">个人中心</el-breadcrumb-item>

    </el-breadcrumb>
    <el-tabs v-model="activeName" @tab-click="handleClick"
             v-loading="loading">
      <el-tab-pane label="竞猜结果" name="seven">竞猜结果</el-tab-pane>
      <el-tab-pane label="全部订单" name="first">
        <el-table
          :data="userSchemeRecords"
          style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="订单编号">
                  <span>{{ props.row.usrno }}</span>
                </el-form-item>
                <el-form-item label="用户昵称">
                  <span>{{  }}</span>
                </el-form-item>
                <el-form-item label="方案名称">
                  <span>{{ props.row.uno }}</span>
                </el-form-item>
                <el-form-item label="活动">
                  <span>{{ props.row.edno }}</span>
                </el-form-item>
                <el-form-item label="加入时间">
                  <span>{{ props.row.usrdate }}</span>
                </el-form-item>
                <el-form-item label="价格">
                  <span>{{ props.row.usrprice }}</span>
                </el-form-item>
                <el-form-item label="付款时间">
                  <span>{{ props.row.usrtime }}</span>
                </el-form-item>
                <el-form-item label="订单状态">
                  <span>{{ props.row.usrstate }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column
            label="方案名称"
            prop="prno">
          </el-table-column>
          <el-table-column
            label="价格"
            prop="usrprice">
          </el-table-column>
          <el-table-column
            label="购买时间"
            prop="usrdate">
          </el-table-column>
          <el-table-column
            label="订单状态"
            prop="usrstate">
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="全部订单" name="second">
        <el-table
          :data="userSchemeRecords"
          style="width: 100%"
          :row-class-name="tableRowClassName">
          <el-table-column
            prop="prno"
            label="方案名称"
            width="120">
          </el-table-column>

        <el-table-column
          prop="uno"
          label="用户昵称"
          width="120">
        </el-table-column>
        <el-table-column
          prop="usrdate"
          label="购买时间"
          width="150px">
        </el-table-column>

          <el-table-column
            prop="usrprice"
            label="价格"
            width="100px"
          >
          </el-table-column>
          <el-table-column
            prop="usrtime"
            label="支付时间">
          </el-table-column>
          <el-table-column
            prop="usrstate"
            label="订单状态">
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="已付款" name="third">已付款</el-tab-pane>
      <el-tab-pane label="未付款" name="fourth">未付款</el-tab-pane>
      <el-tab-pane label="已完成" name="five">已完成</el-tab-pane>
      <el-tab-pane label="我的关注" name="six">
        <div class="expert" v-for="(expert,index) in expertImgs">
          <a href="#" title="点击查看">
            <div class="imgDiv">
              <img :src="getImgUrl(expert.eimg)">
            </div>
            <div class="nameDiv">
              {{ expert.ename }}
            </div>
            <div class="lebDiv">
              {{ expert.lename }}
            </div>
          </a>
        </div>

      </el-tab-pane>


  </el-tabs>
  </div>
</template>

<script>
  import api from "../../../../axios/api";
  import utilsFd from '../../../../static/js/utils/index.js'
  export default {
    name: "order",
    data() {
      return {
        activeName: 'second',
        userSchemeRecords: [{"programmes": {}}],
        currentPage: 1,
        experts: [],
        expertImgs: [],
        loading: true
      }
    }, methods: {
      getImgUrl: function (uimg) {
        return "/static/images/expertsImg/" + uimg;
      },
      handleClick(tab, event) {
        if(this.userSchemeRecords.length==0){
          this.getUserSchemeRecord();
          this.getProgrammes();
          console.log(111)
          console.log(this.userSchemeRecords)
          this.$message.success("加载成功")
        }
        if (this.expertImgs.length == 0) {
          this.getExpertImg();
        }
        if (this.experts.length == 0) {
          this.getExperts();

        }
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex % 2 == 0) {
          return 'warning-row';
        } else {
          return '';
        }
        return '';
      },
      getUserSchemeRecord(currPage) {
        if (currPage != null) {

          this.currentPage = currPage;
        }
        //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
        api.setDataFromAxios("/api/userSchemeRecords/pageInfo?currPage=" + this.currentPage + "&pageSize=5", null, "get")
          .then(res => {

            this.userSchemeRecords = res.tList;
            this.userSchemeRecordsData();
            this.loading = false;
            this.getProgrammes();
            console.log()
          });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
      },

      getExpertImg() {
        //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
        api.setDataFromAxios("/expertImg", null, "post")
          .then(res => {
            // console.log(res)
            this.expertImgs = res.tList;
          });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
      },
      getExperts() {
        //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
        api.setDataFromAxios("/experts", null, "post")
          .then(res => {
            console.log(res)
            this.experts = res.tList;
          });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
      },
      getProgrammes() {
        //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
        api.setDataFromAxios("/programmes", null, "post")
          .then(res => {
            // console.log(res)
            this.userSchemeRecords.programmes = res.tList;
            console.log(this.userSchemeRecords)

          });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
      },
      procesDate(date) {
        var date = new Date(date)
        date  = utilsFd.FD.Fd().format(date)
        return date
      },
      userSchemeRecordsData() {
        for (var i = 0; i < this.userSchemeRecords.length; i++) {
          this.userSchemeRecords[i].usrdate = this.procesDate(this.userSchemeRecords[i].usrdate);
          this.userSchemeRecords[i].usrtime = this.procesDate(this.userSchemeRecords[i].usrtime);
          //console.log(this.user.orderForms[i].uresdate)
        }
      },

    }, created() {
      this.getUserSchemeRecord();


    }

  }
</script>

<style scoped lang="stylus">
  .orderPane
    margin-top 30px

    div
      div

        .expert
          float: left;

          a
            text-decoration: none;

          .nameDiv
            color black
            font-size 14px
            padding 5px

          .lebDiv
            width 75px
            color #d93635
            margin-left 24px
            font-size 15px
            border-radius 4px
            border solid #d93635 1px

          .imgDiv
            width 125px
            height 70px

            img
              border-radius 45px
              width 70px
              height 70px


  .demo-table-expand
      font-size: 0

  .demo-table-expand
    label
    width: 90px
    color: #99a9bf

  .demo-table-expand
     .el-form-item
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;


</style>
